import Nodata from '@/app/[locale]/common/nodata/nodata';
import useContentLayer from '@/hooks/useContentLayer';
import type { TMetadata } from '@/types';
import Outline from '@/app/[locale]/posts/[id]/edit/outline';

export default function Preview({
  content,
  metadata,
}: {
  content: string;
  metadata: TMetadata;
}) {
  useContentLayer({
    dep: content,
    metadata,
  });

  return (
    <div className="row">
      <div className="col">
        {content && content !== 'nodata' ? (
          <div className="container">
            <Outline content={content} />

            <div
              className="content-layer"
              dangerouslySetInnerHTML={{ __html: content }}
            ></div>
          </div>
        ) : (
          <Nodata />
        )}
      </div>
    </div>
  );
}
